<template>
	<!-- 头部模块 -->
  <div class="index-header">
    <!-- 限制元素堆积在中间 -->
    <div class="limit-box">
      <!-- 可以返回首页的logo -->
      <div class="logo" @click="GotoIndex"></div>
      <!-- 移动端显示：用户菜单 -->
      <div class="menu" @click="menu"></div>
      <div v-if="!this.$store.state.user.username" class="login" @click="login"><button>登 录</button></div>
      <div v-else class="navbar-item has-dropdown is-hoverable" @mouseover="iSHoverable(true);" @mouseout="iSHoverable(false);">
        <a class="navbar-link">
          {{this.$store.state.user.username}}
        </a>
        <div class="navbar-dropdown" v-show="isUserMenuShow">
          <a class="navbar-item" @click="$router.push('/profile/main')">我的主页</a>
          <a class="navbar-item" @click="$router.push('/profile/mod')">修改密码</a>
          <hr class="navbar-divider">
          <a class="navbar-item" @click.prevent="logout">登出</a>
        </div>
      </div>
      <!-- 搜索栏 -->
      <div class="search-box">
        <form action="" @submit.prevent="search">
          <input type="text" v-model="searchText" placeholder="搜索文章">
        </form>
      </div>
      <transition name="slide">
        <ul class="nav" v-show="isNavShow">
          <li><a @click.prevent="GotoIndex">首页</a></li>
        </ul>
      </transition>
    </div>
	</div>

</template>

<script>
	export default {
		name: 'index-header',
		data() {
			return {
        // 搜索内容
        searchText: null,
        // 是否显示菜单栏
        isNavShow: true,
        isUserMenuShow:false,
			}
		},
    created() {
      // 如果是手机端，则默认不显示菜单栏
      var isMobile = matchMedia('(max-width: 825px)').matches
      if(isMobile) {this.isNavShow = false}else{
        this.isNavShow = true
      }
    },
		methods: {
      iSHoverable(flag){
          this.isUserMenuShow = flag
      },
      // 统一使用replace
      router(path) {
        if(this.$route.path === path) return
        this.$router.replace(path)
      },
      // 跳转到登录页
      login() {
        if(this.$route.path === '/login') return
        this.$router.replace({
          name: 'login'
        })
      },
      // 跳转到注册页
      register() {
        this.router('/register')
      },
      // 返回首页
      GotoIndex() {
        this.router('/')
      },
      // 跳转到测试页
      test() {
        this.router('/test')
      },
      // 跳转到关于页
      about() {
        this.router('/about')
      },
      // 登出
      logout() {
        localStorage.removeItem('token')
        this.$store.commit('logout')
      },
      // 我的
      my() {
        this.router('/profile')
      },
      // 搜索
      search() {
        if(!this.searchText) {
          this.$router.push('/')
        }
        else if(this.$route.params.query != this.searchText) {
          this.$router.push({
            name: 'search',
            params: {query: this.searchText}
          })
          this.searchText = this.$route.params.query
        }
      },
      // 展示或隐藏移动端的菜单栏
      menu() {
        this.isNavShow = !this.isNavShow
      }
    }
	}
</script>

<style lang="scss" scoped>
.navbar-item.has-dropdown {
  align-items: stretch;
  float: right;
  height: 40px;
  cursor: pointer;
  line-height: 40px;
  margin: 10px 0 0 5px;
  color: #fff;
  font-size: 16px;
  padding: 0;
}
.navbar-item.has-dropdown a:hover {
  color: #80bd01;
}
.navbar-item.has-dropdown a:focus {
  color: #80bd01;
}

.navbar-item {
  display: flex;
}
.navbar-item, .navbar-link {
  align-items: center;
  display: flex;
}
.navbar-item {
  display: block;
  flex-grow: 0;
  flex-shrink: 0;
}
.navbar-item, .navbar-link {
  color: #4a4a4a;
  display: block;
  line-height: 1.5;
  padding: .5rem .75rem;
  position: relative;
}

.navbar.is-spaced .navbar-link, .navbar.is-spaced a.navbar-item {
  border-radius: 4px;
}
.navbar-link:not(.is-arrowless) {
  padding-right: 2.5em;
}
.navbar-item, .navbar-link {
  align-items: center;
  display: flex;
}
.navbar-link, a.navbar-item {
  cursor: pointer;
}
.navbar-item, .navbar-link {
  color: #4a4a4a;
  display: block;
  line-height: 1.5;
  padding: .5rem .75rem;
  position: relative;
}
.navbar-link:not(.is-arrowless)::after, .select:not(.is-multiple):not(.is-loading)::after {
  border: 3px solid transparent;
  border-radius: 2px;
  border-right: 0;
  border-top: 0;
  content: " ";
  display: block;
  height: .625em;
  pointer-events: none;
  position: absolute;
  top: 50%;
  transform: rotate(-45deg);
  transform-origin: center;
  width: .625em;
  border-color: #3273dc;
  margin-top: -.375em;
  right: 1.125em;
}
.navbar-dropdown.is-boxed, .navbar.is-spaced .navbar-dropdown {
  border-radius: 6px;
  border-top: none;
  box-shadow: 0 8px 8px rgba(10,10,10,.1), 0 0 0 1px rgba(10,10,10,.1);
  display: block;
  opacity: 0;
  pointer-events: none;
  top: calc(100% + (-4px));
  transform: translateY(-5px);
  transition-duration: 86ms;
  transition-property: opacity,transform;
}
.navbar-dropdown {
  background-color: #fff;
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
  border-top: 2px solid #dbdbdb;
  box-shadow: 0 8px 8px rgba(10,10,10,.1);
  font-size: .875rem;
  left: 0;
  min-width: 100%;
  position: absolute;
  top: 100%;
  z-index: 20;
}
.navbar-dropdown {
  font-size: .875rem;
  padding-bottom: .5rem;
  padding-top: .5rem;
}
.navbar.is-spaced .navbar-link, .navbar.is-spaced a.navbar-item {
  border-radius: 4px;
}
.navbar-dropdown a.navbar-item {
  //padding-right: 3rem;
}
.navbar-dropdown .navbar-item {
  padding: .375rem 1rem;
  white-space: nowrap;
}
.navbar-dropdown .navbar-item {
  //padding-left: 1.5rem;
  //padding-right: 1.5rem;
}
.navbar-link, a.navbar-item {
  cursor: pointer;
}
.navbar-item {
  display: flex;
}
.navbar-item, .navbar-link {
  align-items: center;
  display: flex;
}
.navbar-item {
  display: block;
  flex-grow: 0;
  flex-shrink: 0;
}
.navbar-item, .navbar-link {
  color: #4a4a4a;
  display: block;
  line-height: 1.5;
  padding: .5rem .75rem;
  position: relative;
}
  // vue动画效果
  @keyframes show-nav{
    from {height: 0;}
    to {height: 50px;}
  }
  .slide-enter, .slide-leave-to{
    height: 0;
  }
  .slide-enter-to, .slide-leave{
    height: 50px;
  }
  .slide-enter-active, .slide-leave-active{
    transition: all 1s;
  }
  // 定义背景颜色
  $bgc: #42B983;

  .index-header{
    width: 100%;
    min-height: 60px;
    //background-color: $bgc;
    box-sizing: border-box;
    padding: 0 70px 0 70px;
    &::after{
      content: '';
      display: block;
      clear: left;
    }
    border-bottom: 1px solid #f1f1f1;
    background: #fff;
  }
  .limit-box{
    max-width: 1400px;
    margin: 0 auto;
  }

  .logo{
    float: left;
    height: 60px;
    width: 150px;
    cursor: pointer;
    background: url('~@assets/img/golangtc.png') no-repeat center center;
    background-size: 150px;
  }

  .search-box{
    float: right;
    height: 40px;
    margin: 10px 0 0 10px;
    border-radius: 8px;
    border: 1px solid hsla(0,0%,59.2%,.2);
    background-color: rgba(227,231,236,.2);
    background: #fff url(~@assets/img/search.png) no-repeat 5px 10px;
    input{
      background: none;
      border: none;
      outline: none;
      height: 30px;
      line-height: 30px;
      font-size: 14px;
      margin: 5px 0 5px 25px;
    }
    &:hover{
      box-shadow: 0 0 6px rgba(0, 0, 0, 0.5);
    }
  }
  .login button{
    float: right;
    height: 40px;
    cursor: pointer;
    line-height: 40px;
    margin: 10px 0 0 20px;
    border-radius: 8px;
    border: 1px solid rgba(151,151,151,.2);
    width: 60px;
    background-color: #91d601;
    color: #fff;
    font-size: 16px;
  }
  .menu{
    display: none;
  }

  .nav {
    float: left;
    li {
      float: left;
      a{
        line-height: 60px;
        display: block;
        height: 100%;
        cursor: pointer;
        font-size: 18px;
        padding: 0 25px;
        color: #71777c;
        &:hover{
          color: #80bd01;
        }
      }
    }
    li:first-child a{
      color: #80bd01;
    }
  }
  // 移动端
  @media (max-width: $action-width) {
    .index-header{
      padding: 0;
    }
    .logo{
      width: 50px;
      height: 50px;
      background: url('~@assets/img/small-logo1.png') no-repeat center center;
      background-size: 40px;
    }
    .search-box{
      float: left;
      height: 30px;
      margin: 10px 0 0 0;
      border-radius: 8px;
      border: 1px solid hsla(0,0%,59.2%,.2);
      background-color: rgba(227,231,236,.2);
      background: #fff url(~@assets/img/search.png) no-repeat 5px 5px;
      width: 40%;
      input{
        background: none;
        border: none;
        outline: none;
        height: 20px;
        line-height: 20px;
        font-size: 14px;
        margin: 5px 0 5px 25px;
      }
      &:hover{
        box-shadow: 0 0 6px rgba(0, 0, 0, 0.5);
      }
    }

    // 导航栏
    .nav{
      float: none;
      clear: left;
      overflow: hidden;
      display: flex;
      justify-content: center;
      &::after{
        content: '';
        display: block;
        clear: both;
      }
    }
    // 菜单按钮
    .menu{
      display: block;
      float: left;
      background: url('~@assets/img/svg/menu.svg') no-repeat center center;
      height: 50px;
      width: 50px;
      background-size: 40px;
      cursor: pointer;
    }
    .login button{
      float: right;
      height: 30px;
      cursor: pointer;
      line-height: 30px;
      margin: 10px 10px 0 0;
      border-radius: 8px;
      border: 1px solid rgba(151,151,151,.2);
      width: 50px;
      background-color: #91d601;
      color: #fff;
      font-size: 14px;
    }
  }

</style>
